<div class="nav">
  <button on:click="fire('home')">Home</button>
  <button on:click="fire('zoomout')">Zoom Out</button>
  <!-- currently broken, so disabling -->
  <!-- if we bind to scale instead it mostly works except zoom was designed to be the one source of truth for scale 
    If we want to use a slider like this we'll need to fix-->
  <!-- <input type="range" bind:value=unit min=1 max=1000 step=0.01 /> -->
  <button on:click="fire('zoomin')">Zoom In</button>
  <button on:click="fire('fullscreen')">Fullscreen</button>
  <!-- <span>{`${gcx.toPrecision(3)}, ${gcy.toPrecision(3)}`}</span> -->
  <select name="layer" bind:value="layer_name">
    <option value="mixed3b">mixed3b</option>
    <option value="mixed4a">mixed4a</option>
    <option value="mixed4b">mixed4b</option>
    <option value="mixed4c">mixed4c</option>
    <option value="mixed4d">mixed4d</option>
    <option value="mixed4e">mixed4e</option>
    <option value="mixed5a">mixed5a</option>
    <option value="mixed5b">mixed5b</option> 
  </select>
</div>

<script>

</script>

<style>
  .nav {
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    padding: 20px 20px 10px 20px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.8);
    width: calc(100% - 40px);
  }
  button {
    background: #ff6600;
    color: white;
    border-radius: 4px;
    border: none;
    padding: 6px 12px;
    text-transform: uppercase;
  }
</style>